<script setup lang="ts">
import { h } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Edit, Plus } from "@element-plus/icons-vue";
import { ElButton } from "element-plus";

import ApiActivity from "@/api/activity";
import useProTable from "@/hooks/useProTable";
import EnumTag from "@/components/common/EnumTag.vue";

import { EnumStatus } from "@/utils/enum";

const router = useRouter();
const { params } = useRoute();
const act_id = +params.act_id;

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  { label: "权益包标题", prop: "ticket_title", minWidth: 120 },
  {
    label: "状态",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumStatus,
        value: row.status,
      }),
  },
  // { label: "排序", prop: "sort", width: 120 },
  // { label: "备注", prop: "remark", minWidth: 160, },
  {
    label: "操作",
    width: 160,
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          icon: Edit,
          type: "primary",
          onClick: () =>
            router.push(`/activity/ticket/${act_id}/modify/${row.id}`),
        },
        "编辑"
      ),
  },
];

const [Protable] = useProTable({
  fetchUrl: ApiActivity.ticketList,
  fetchOptions: { defaultSearch: { act_id } },
  tableOptions: {
    columns: tableColumns,
  },
});
</script>

<template>
  <Protable>
    <template #tool-left>
      <ElButton
        :icon="Plus"
        type="primary"
        @click="router.push(`/activity/ticket/${act_id}/create`)"
        >新增权益包
      </ElButton>
    </template>
  </Protable>
</template>
